<template>
  <div id="bottom">
    <div id="cloth">
      <button id="return" @click="release">&#xe6ff;</button>
      <div id="bigdetailed">
        <div id="top">
          <img :src="require('@/assets/' + $route.params.datas.url)" :alt="datas.gname" />
          <div id="right">
            <p id="name">{{ $route.params.datas.gname }}</p>
            <p id="money">{{ $route.params.datas.price }}</p>
            <p id="discount">原价：{{ $route.params.datas.price / 0.8 }}</p>
            <p id="introduce">商品描述   
              <span id="state" :style="($route.params.datas.state==1?'color:blue':'color:red')">{{($route.params.datas.state==0?"已售":"在售")}}</span>
              ——————————————————————————</p>
            <p id="content">{{ $route.params.datas.detailed }} </p>
            
            <p id="date">发布于 {{ $route.params.datas.date }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script scoped>
import VueCookies from "vue-cookies";
// import axios from "axios";
import router from "../router";

export default {

  methods: {
    release: function () {
      // 返回页面
      router.replace({
        name: this.$route.params.returnOne,
      });
    },
  },
  data() {
    return {
      datas:{url:"logo.png"},
      uid: VueCookies.get("uid"),
      ucookie: VueCookies.get("ucookie"),
    };
  },
};
</script>
  
  <style scoped>
@font-face {
  font-family: "iconfont";
  src: url("../fonts/iconfont_five.ttf") format("truetype");
}
#bottom {
  width: 100%;
  height: 1000px;
  position: fixed;
  top: 0px;
  z-index: 9;
  background-color: rgba(221, 218, 218, 0.5);
  /* opacity: 0.5; */
}
#bottom #cloth {
  width: 80%;
  height: 600px;
  position: fixed;
  z-index: 10;
  top: 80px;
  left: 10%;
  background-color: rgb(255, 255, 255);
  overflow: hidden; /* 清除浮动 */
}

#cloth #return {
  font-family: "iconfont" !important;
  font-size: 55px;
  border: 0px;
  margin-left: 10px;
  margin-top: 10px;
  float: left;
  background-color: rgba(0, 0, 0, 0);
  cursor: pointer; /* 经过有手指*/
}

#cloth #left {
  width: 30%;
  height: 480px;
  float: left;
  margin-top: 80px;
  margin-left: 50px;
  /* border: 1px solid rebeccapurple; */
}

#left img {
  width: 95%;
  height: auto;

  object-fit: scale-down; /* 让img的尺寸不被拉伸 */
}

#cloth #right {
  width: 50%;
  height: 300px;
  float: left;
  margin-top: 80px;
  margin-left: 80px;
  /* border: 1px solid rebeccapurple; */
}

#right #state{
  float: right;
  margin-right: 100px;
}

#right #content,
select {
  font-size: 20px;
  margin-left: 30px;
  margin-left: 0px;
}

#right #content input {
  height: 24px;
  /* border: 0px; */
  padding: 0px;
  padding-left: 10px;
  vertical-align: bottom; /*调整对齐线*/
}

#right #content textarea {
  width: 300px;
  resize: none;
  vertical-align: top; /*调整对齐线*/
  padding-left: 10px;
  padding-top: 10px;
}

#right #info {
  width: 100px;
  height: 50px;
  margin-top: 50px;
  margin-left: 150px;
}
/* ********************************* */
#bigdetailed {
  /* overflow: hidden; */
  width: 100%;
  /* height: 1200px; */
  background-color: #eeeeee;
}

#bigdetailed #top {
  width: 85%;
  height: 600px;
  /* border: 1px solid #000; */
  margin-left: 10%;
  padding-top: 110px;
}

#top img {
  display: inline-block;
  float: left;
  width: 38%;
  height: 400px;
  margin-left: 2%;
  vertical-align: bottom; /*调整对齐线*/
  object-fit: scale-down;
}

#top #right {
  display: inline-block;
  width: 48%;
  height: 400px;
  margin: 0px;
  margin-left: 5%;
  /* border: 1px solid #000; */
  padding-left: 5%;
}

#top #right #name {
  font-size: 24px;
  text-indent: 20px;
}

#top #right #money {
  font-size: 20px;
  color: red;
  text-indent: 20px;
}

#top #right #discount {
  font-size: 18px;
  text-decoration: line-through;
  color: #beb9b6;
  text-indent: 20px;
}
#top #right #introduce {
  margin-top: 60px;
}

#top #right #content {
  width: 100%;
  height: 85px;
  text-indent: 2em;
}

#top #right #date {
  width: 100%;
  text-align: center;
  color: #acacac;
}
</style>